import { Button, Form, Input, Typography } from "antd";
import { animated, useSpring } from "@react-spring/web";
import { LoginParams, useLogin } from "../../service/auth/auth-service";
import { useNavigate } from "react-router";
import { useRecoilState } from "recoil";
import { userState } from "../../stores/user";
import styled from "@emotion/styled";
import { naviState } from "../../stores/navi";
import { RouteVO } from "../../service/rbac/menu-service";
import loginBg from "../../assets/login-bg.png";
/**
 * 登录页面
 */
const LoginPage = () => {
  const [, setUser] = useRecoilState(userState);
  const [navi, setNavi] = useRecoilState(naviState);
  const navigate = useNavigate();
  /**
  * 登录接口
  */
  const { mutateAsync, isLoading, isError } = useLogin();
  // const { mutateAsync: routeMutateAsync } = useGetRouteByUser();
  const onFinish = (values: LoginParams) => {
    mutateAsync(values).then((res) => {
      let route: RouteVO[] = []
      console.log(res.userInfo.sysRoleId)
      if (res.userInfo.sysRoleId === 1) {
        //admin
        route = [
          {
            id: 4,
            name: "工作台",
            parentId: 0,
            path: "/backweb/workplace",
            component: "",
            redirect: "",
            alwaysShow: 'false',
            hidden: 'false',
            seq: 0,
            meta: {
              title: "工作台",
              icon: "gauge-high",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "false",
              roles: [],
            }
          },
          {
            id: 1,
            name: "单位统计",
            parentId: 0,
            path: "/backweb/dashboard",
            component: "",
            redirect: "",
            alwaysShow: 'true',
            hidden: 'true',
            seq: 1,
            meta: {
              title: "单位统计",
              icon: "chart-line",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "false",
              roles: [],
            }
          },
          {
            id: 2,
            name: "数据统计",
            parentId: 0,
            path: "/backweb/home",
            component: "",
            redirect: "",
            alwaysShow: 'false',
            hidden: 'false',
            seq: 1,
            meta: {
              title: "数据统计",
              icon: "chart-pie-simple",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "true",
              roles: [],
            }
          },
          {
            id: 6,
            name: "用户角色",
            parentId: 0,
            path: "/backweb/system/sys-role",
            component: "",
            redirect: "",
            alwaysShow: 'false',
            hidden: 'false',
            seq: 1,
            meta: {
              title: "用户角色",
              icon: "user-group",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "false",
              roles: [],
            }
          }, {
            id: 7,
            name: "单位管理",
            parentId: 0,
            path: "/backweb/system/unit",
            component: "",
            redirect: "",
            alwaysShow: 'false',
            hidden: 'false',
            seq: 1,
            meta: {
              title: "单位管理",
              icon: "chart-network",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "false",
              roles: [],
            }
          }, {
            id: 8,
            name: "街道管理",
            parentId: 0,
            path: "/backweb/jdunit",
            component: "",
            redirect: "",
            alwaysShow: 'false',
            hidden: 'false',
            seq: 1,
            meta: {
              title: "街道管理",
              icon: "chart-network",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "false",
              roles: [],
            }
          }, {
            id: 9,
            name: "矛盾纠纷类型",
            parentId: 0,
            path: "/backweb/beeftype",
            component: "",
            redirect: "",
            alwaysShow: 'false',
            hidden: 'false',
            seq: 1,
            meta: {
              title: "矛盾纠纷类型",
              icon: "flag-swallowtail",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "false",
              roles: [],
            }
          }, {
            id: 10,
            name: "新闻中心",
            parentId: 0,
            path: "/backweb/article",
            component: "",
            redirect: "",
            alwaysShow: 'false',
            hidden: 'false',
            seq: 1,
            meta: {
              title: "新闻中心",
              icon: "book",
              noCache: "false",
              breadcrumb: "true",
              affix: "memo",
              activeMenu: "false",
              roles: [],
            }
          }, {
            id: 11,
            name: "法律分类",
            parentId: 0,
            path: "/backweb/lawstype",
            component: "",
            redirect: "",
            alwaysShow: 'false',
            hidden: 'false',
            seq: 1,
            meta: {
              title: "法律分类",
              icon: "tags",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "false",
              roles: [],
            }
          }, {
            id: 12,
            name: "法律法规",
            parentId: 0,
            path: "/backweb/laws",
            component: "",
            redirect: "",
            alwaysShow: 'false',
            hidden: 'false',
            seq: 1,
            meta: {
              title: "法律法规",
              icon: "gauge-high",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "false",
              roles: [],
            }
          }, {
            id: 13,
            name: "走访/矛排管理",
            parentId: 0,
            path: "/backweb/beef",
            component: "",
            redirect: "",
            alwaysShow: 'false',
            hidden: 'false',
            seq: 1,
            meta: {
              title: "走访/矛排管理",
              icon: "shield-check",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "false",
              roles: [],
            }
          }, {
            id: 14,
            name: "用户管理",
            parentId: 0,
            path: "/backweb/system/sys",
            component: "",
            redirect: "",
            alwaysShow: 'false',
            hidden: 'false',
            seq: 1,
            meta: {
              title: "用户管理",
              icon: "user",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "false",
              roles: [],
            }
          }
        ]
      } else if (res.userInfo.sysRoleId === 2 || res.userInfo.sysRoleId === 5) {
        //民警 + 社区人员
        route = [
          {
            id: 4,
            name: "工作台",
            parentId: 0,
            path: "/backweb/workplace",
            component: "",
            redirect: "",
            alwaysShow: 'false',
            hidden: 'false',
            seq: 0,
            meta: {
              title: "工作台",
              icon: "gauge-high",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "false",
              roles: [],
            }
          }, {
            id: 12,
            name: "走访/矛排管理",
            parentId: 0,
            path: "/backweb/beef",
            component: "",
            redirect: "",
            alwaysShow: 'false',
            hidden: 'false',
            seq: 1,
            meta: {
              title: "走访/矛排管理",
              icon: "shield-check",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "false",
              roles: [],
            }
          },
        ]
      } else if (res.userInfo.sysRoleId === 3 || res.userInfo.sysRoleId === 4) {
        //所长 + 综治中心
        route = [
          {
            id: 4,
            name: "工作台",
            parentId: 0,
            path: "/backweb/workplace",
            component: "",
            redirect: "",
            alwaysShow: 'false',
            hidden: 'false',
            seq: 0,
            meta: {
              title: "工作台",
              icon: "gauge-high",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "false",
              roles: [],
            }
          },
          {
            id: 1,
            name: "单位统计",
            parentId: 0,
            path: "/backweb/dashboard",
            component: "",
            redirect: "",
            alwaysShow: 'true',
            hidden: 'true',
            seq: 1,
            meta: {
              title: "单位统计",
              icon: "chart-line",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "false",
              roles: [],
            }
          },
          {
            id: 2,
            name: "数据统计",
            parentId: 0,
            path: "/backweb/home",
            component: "",
            redirect: "",
            alwaysShow: 'false',
            hidden: 'false',
            seq: 1,
            meta: {
              title: "数据统计",
              icon: "chart-pie-simple",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "true",
              roles: [],
            }
          }, {
            id: 12,
            name: "走访/矛排管理",
            parentId: 0,
            path: "/backweb/beef",
            component: "",
            redirect: "",
            alwaysShow: 'false',
            hidden: 'false',
            seq: 1,
            meta: {
              title: "走访/矛排管理",
              icon: "shield-check",
              noCache: "false",
              breadcrumb: "true",
              affix: "",
              activeMenu: "false",
              roles: [],
            }
          },
        ]
      }

      setUser({ ...res, route: route });
      setNavi({
        ...navi,
        tabHistory: [],
        defaultOpenKeys: ["0"],
        defaultSelectedKeys: ["4"],
      });
      sessionStorage.setItem(
        "__BEEFSOLVE_BACKWEB__",
        JSON.stringify({ ...res, route: route })
      );
      sessionStorage.setItem(
        "__BEEFSOLVE_BACKWEB__NAVI__",
        JSON.stringify({
          ...navi,
          defaultOpenKeys: ["0"],
          defaultSelectedKeys: ["4"],
        })
      );
      navigate({ pathname: "/backweb/workplace" });
      //登录成功后查询路由权限
      // routeMutateAsync().then((response) => {
      //   setUser({ ...res, route: response });
      //   //设置到浏览器缓存
      //   sessionStorage.setItem(
      //     "__BEEFSOLVE_BACKWEB__",
      //     JSON.stringify({ ...res, route: response })
      //   );
      //   //设置到menu到缓存
      //   const activeMenuIndex: string[] = [];
      //   const openMenuIndex: string[] = [];
      //   //需要跳转的路由
      //   let path: string | null = null;
      //   response.forEach((e) => {
      //     if (e.meta.activeMenu === "active") {
      //       activeMenuIndex.push(e.id + "");
      //       getNaviParentId(e.parentId, response, openMenuIndex);
      //       setNavi({
      //         ...navi,
      //         tabHistory: [
      //           {
      //             title: e.meta.title,
      //             path: e.path,
      //             key: activeMenuIndex,
      //           },
      //         ],
      //         defaultOpenKeys: openMenuIndex,
      //         defaultSelectedKeys: activeMenuIndex,
      //       });
      //       //设置到session
      //       sessionStorage.setItem(
      //         "__BEEFSOLVE_BACKWEB__NAVI__",
      //         JSON.stringify({
      //           ...navi,
      //           defaultOpenKeys: openMenuIndex,
      //           defaultSelectedKeys: activeMenuIndex,
      //         })
      //       );
      //       path = e.path;
      //       return;
      //     }
      //   });
      //   if (path) {
      //     navigate({ pathname: path });
      //   }
      // });
    });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  const springsTitle1 = useSpring({
    from: { x: 2000 },
    to: { x: 100 },
    config: {
      tension: 280,
      friction: 60,
    },
  });
  const springsTitle2 = useSpring({
    from: { x: 2000 },
    to: { x: 200 },
    config: {
      tension: 210,
      friction: 20,
    },
  });
  const springsText = useSpring({
    from: { y: 1200 },
    to: { y: 10 },
    config: {
      tension: 280,
      friction: 120,
    },
  });
  return (
    <LoginPageContainer className="abc">
      <div className="triangle_top"></div>
      <div className="triangle_bottom"></div>
      <div className="left">
        <div className="container">
          <p style={{ textAlign: "center" }}>
            {isError ? (
              <Typography.Text type={"danger"}> 账号或密码错误</Typography.Text>
            ) : null}
          </p>
          <h1 className="left_title">欢迎登录</h1>
          <div className="login_card">
            <Form
              style={{ width: "20rem" }}
              layout={"vertical"}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item label="用户名称" name="userName">
                <Input />
              </Form.Item>
              <Form.Item label="用户密码" name="password">
                <Input.Password />
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  block
                  loading={isLoading}
                  style={{ backgroundColor: "#333" }}
                >
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
      <div className="right">
        <animated.div className="right_title1" style={{ ...springsTitle1 }}>
          矛盾排查管理系统
        </animated.div>
        {/* <animated.div className="right_title2" style={{ ...springsTitle2 }}>
          集中开展排查调处矛盾纠纷
        </animated.div>
        <animated.div className="right_text" style={{ ...springsText }}>
          认真贯彻落实市县政府有关会议和文件精神，县质量技术监督局以产品质量安全及人事、劳资纠纷等问题为排查重点，内外结合，多措并举，全面抓好安全稳定工作。
        </animated.div> */}
      </div>
    </LoginPageContainer>
  );
};

export default LoginPage;

const LoginPageContainer = styled.div`
  height: 100vh;
  background: var(${`--primary-bg-color`});
  display: flex;
  position: relative;
  overflow: hidden;

  .triangle_top {
    position: absolute;
    width: 30rem;
    height: 25%;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    clip-path: polygon(100% 0, 0 0, 0 100%);
  }

  .triangle_bottom {
    position: absolute;
    width: 30rem;
    height: 20%;
    background-color: rgba(0, 0, 0, 0.5);

    bottom: 0;
    left: 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }

  .left {
    position: relative;
    width: 30rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(${`--white-color`});
    background-color: rgba(0, 0, 0, 0.9);
    overflow: hidden;

    > .container {
      height: 25rem;
    }
  }

  .right {
    flex: 1;
    height: 100%;
    background-color: #333;

    .right_title1 {
      margin-top: 50%;
      font-size: 2rem;
      color: var(${`--white-color`});
    }

    .right_title2 {
      font-size: 2rem;
      color: var(${`--white-color`});
    }

    .right_text {
      color: var(${`--white-color`});
      padding-right: 12.5rem;
      word-wrap: break-word;
      margin-left: 100px;
    }
  }
`;
